<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Pick Your Glasses</title>
	
	<script src="js/compatibility.js"></script>
	<script src="js/smoother.js"></script>
	
	<script src="../js/objectdetect.js"></script>
	<script src="../js/objectdetect.frontalface.js"></script>
	
	<script src="js/jquery.js"></script>
	<script src="../js/jquery.objectdetect.js"></script>
	
	<script>
	$(window).load(function() {
	
		var smoother = new Smoother([0.9999, 0.9999, 0.9, 0.9], [0, 0, 0, 0]),
			video = document.getElementById('video'),
			glasses = document.getElementById('glasses');
				
		try {
			compatibility.getUserMedia({video: true}, function(stream) {
				try {
					video.src = compatibility.URL.createObjectURL(stream);
				} catch (error) {
					video.src = stream;
				}
				compatibility.requestAnimationFrame(play);
			}, function (error) {
				alert('WebRTC not available');
			});
		} catch (error) {
			alert(error);
		}
		
		function play() {
			compatibility.requestAnimationFrame(play);
			if (video.paused) video.play();
          
			if (video.readyState === video.HAVE_ENOUGH_DATA) {
				$(video).objectdetect('all', {size: 400, scaleMin: 9, scaleFactor: 1.1, classifier: objectdetect.frontalface}, function(coords) {
					if (coords.length > 1) {
						
						/* Find coordinates with maximum confidence: */
						var coord = coords[0];
						var coord2 = coords[1];
						var b;
						for (var i = coords.length - 1; i > 0; --i)
							if (coords[i][4] > coord[4])
							{							
								coord = coords[i];
								b =i;
							}
							
						for (var i = coords.length - 1; i > 0; --i)
							if (coords[i][4] > coord2[4] && b != i) coord2 = coords[i];
						
						
						coord = smoother.smooth(coord);
						
						
						/* Display glasses overlay: */
						glasses.style.left    = ~~(coord[0] + coord[2] * 1.0/8 + video.offsetLeft) + 'px';
						glasses.style.top     = ~~(coord[1] + coord[3] * 0.8/8 + video.offsetTop) + 'px';
						glasses.style.width   = ~~(coord[2] * 6/8) + 'px';
						glasses.style.height  = ~~(coord[3] * 6/8) + 'px';
						glasses.style.opacity = 1;
						
						//coord2 = smoother.smooth(coord2);
						glasses2.style.left    = ~~(coord2[0] + coord2[2] * 1.0/8 + video.offsetLeft) + 'px';
						glasses2.style.top     = ~~(coord2[1] + coord2[3] * 0.8/8 + video.offsetTop) + 'px';
						glasses2.style.width   = ~~(coord2[2] * 6/8) + 'px';
						glasses2.style.height  = ~~(coord2[3] * 6/8) + 'px';
						glasses2.style.opacity = 1;
						
					} else {
						var tttt;
						var opacity = glasses.style.opacity - 0.2;
						glasses.style.opacity = opacity > 0 ? opacity : 0;
						
						var opacity2 = glasses2.style.opacity - 0.2;
						glasses2.style.opacity = opacity2 > 0 ? opacity2 : 0;
					}
				});
			}
		}
		
		$("#list img").click(function () {
			$("#glasses").attr("src", $(this).attr("src"));
		});
	});
	
    </script>
</head>

<body>
	<h1>Pick Your Glasses</h1>
	<video id="video" style="float: left; margin-right: 1em;"></video>
	<div id="list">
		<img src="img/sunglasses_0.png" style="width: 117px;">
		<img src="img/sunglasses_1.png" style="width: 117px;">
		<img src="img/sunglasses_2.png" style="width: 117px;">
		<img src="img/sunglasses_3.png" style="width: 117px;">
		<img src="img/sunglasses_4.png" style="width: 117px;">
		<img src="img/sunglasses_5.png" style="width: 117px;">
		<img src="img/sunglasses_6.png" style="width: 117px;">
		<img src="img/sunglasses_7.png" style="width: 117px;">
	</div>
	
	<img id="glasses" src="img/sunglasses_0.png" style="position: absolute; display: block; opacity: 0">
	<img id="glasses2" src="img/sunglasses_7.png" style="position: absolute; display: block; opacity: 0">
</body>
</html>